<template>
    <div class="mian">
        <a-form :inline="false" style="width: 800px;" :model="loginForm" :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }" size="small" labelAlign="left">
            <a-form-item label="测试表单">
                <a-input v-model="loginForm.username"></a-input>
            </a-form-item>
            <a-form-item label="测试表单">
                <a-input v-model="loginForm.password"></a-input>
            </a-form-item>
            <a-form-item label="测试表单">
                <a-input v-model="loginForm.code"></a-input>
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
            </a-form-item>
            <a-form-item>
                <a-button @click="handleLogin">提交</a-button>
                <a-button @click="logout" style="margin-left: 10px">登出</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
import { getCodeImg, login, logout } from "../../utils/login";
import Cookies from "js-cookie";
export default {
    data() {
        return {
            codeUrl: "",
            loginForm: {
                username: "admin",
                password: "123456",
                rememberMe: false,
                code: "",
                uuid: ""
            },
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        getCode() {
            getCodeImg().then(res => {
                if (res.code === 200) {
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                } else {
                    this.$message.error("请先登出")
                }
            }).catch(()=>{
                this.$message.error("请先登出")
            });
        },
        handleLogin() {
            login(this.loginForm).then((res) => {
                if (res.code === 200) {
                    this.$message.success("登陆成功")
                    Cookies.set("Admin-Token", res.token)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {
                this.getCode();
                this.$message.error("登陆失败")
            });
        },
        logout() {
            logout(Cookies.get("Admin-Token")).then(() => {
                Cookies.remove('Admin-Token')
                this.$message.success("登出成功")
                this.getCode();
            }).catch(error => {
                this.$message.error("登出失败")

            })
        }
    }
}
</script>

<style lang="less" scoped>
.mian {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
}

.login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
</style>